<template>
  <div class='container'>
    <el-row>
  <el-col :span="18">
    <div class="grid-content bg-purple">
    <FlightSearch :flighsList='airList' :copyList='copyList' v-if="airList.info" @setFlightsList='setFlightsList'/>
    <FlightTitle/>
    <FlightItem :airData="item" v-for="(item,index) in dataList" :key="index"/>
    <!-- 分页器 -->
    <el-pagination
      v-if="airList.flights"
      background
      layout="total,prev, pager, next,jumper,sizes"
      :page-size='pageSize'
      :page-sizes='[2,5,8,10]'
      :total="airList.flights.length"
      @current-change='handleCurrent'
      @size-change='handleSize'
      >
    </el-pagination>
    </div>
    </el-col>
  <el-col class='service' :span="6">
    <div class="grid-content bg-purple-light">
      <HistoryAir/>
      </div>
      </el-col>
   </el-row>
  </div>
</template>

<script>
import FlightTitle from '@/components/air/flightTitle'
import HistoryAir from '@/components/air/historyAir'
import FlightItem from '@/components/air/flightItem'
import FlightSearch from '@/components/air/flightSearch'
export default {
  data() {
    return {
      airList: {},
      pageIndex: 1,
      pageSize: 10,
      copyList: []
    }
  },
  watch: {
    // 监控路由变化
    // 用户点击了历史记录 就是跳转到了机票页面 但是由于已经是在机票页面了
    // 数据不会发生改变 页面也不会刷新 所要监控路由的变化 一旦路由发生变化
    // 就重新发起请求 渲染数据
    $route() {
      this.loadAirList()
    }
  },
  components: {
    FlightTitle,
    HistoryAir,
    FlightItem,
    FlightSearch
  },
  computed: {
    dataList() {
      // 定义每一页的数据数量 服务器返回的是全部的数据 分页需要我们自己来操作
      // 我们把拿回来的数据存进一个变量里面 然后截取我们需要多少的数据再放进一个新的变量
      // 最后可以用这个变量来遍历即可 不需要改变原来的数据 也不可以改变原来的数据
      // slice方法可以返回一个新的数组 该方法传入两个参数 一个是截取的开始 以及结束 结束的索引不包括在里面
      const beginindex = (this.pageIndex - 1) * this.pageSize
      const endindex = beginindex + this.pageSize
      // 将截取的新数据存入定义的变量里面
      if (this.airList.flights) {
        return this.airList.flights.slice(beginindex, endindex)
      } else {
        return []
      }
    }
  },
  mounted() {
    this.loadAirList()
  },
  methods: {
    loadAirList() {
      // 获取机票数据
      this.$axios({
        url: '/airs',
        method: 'get',
        params: this.$route.query
      }).then(res => {
        console.log(res.data)
        this.copyList = [...res.data.flights]
        this.airList = res.data
      })
    },
    handleCurrent(pageIndex) {
      // console.log(index)
      this.pageIndex = pageIndex
    },
    handleSize(pageSize) {
      // console.log(size)
      this.pageSize = pageSize
    },
    setFlightsList(newData) {
      // console.log(value)
      this.airList.flights = newData
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}
.service {
  padding-left: 15px;
}
</style>